<template>
  <div class="page-cont">
    <van-nav-bar
      title="待我处理"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <van-tabs v-model="status">
      <van-tab
        title="质量问题"
        :name="1"
      />
      <van-tab
        title="安全问题"
        :name="2"
      />
    </van-tabs>
    <scroll-list
      v-model="list"
      @onLoad="onLoad"
      ref="list"
    >
      <question-item
        v-for="(item, i) in list"
        :key="i"
        :data="item"
        @complete="complete(i)"
      />
    </scroll-list>
  </div>
</template>

<script>
import ScrollList from '@/components/ScrollList/index.vue'
import QuestionItem from './components/QuestionItem.vue'

export default {
  name: "MyQuestionPage",
  components: {
    QuestionItem,
    ScrollList
  },
  data() {
    return {
      status: 1,
      list: [],
    };
  },
  created() {
  },
  watch: {
    status() {
      this.$refs.list.refresh()
    }
  },
  methods: {
    async onLoad(page, done) {
      let res = await this.api.GET_MY_QUESTION_LIST({pageNo: page, pageSize: 10, type: this.status})
      this.list.push(...res.list)

      // 触发加载完成 大于50模拟全部加载完成
      done(res.pageNo === res.totalPage)
    },
    async complete(i) {
      let data = JSON.parse(JSON.stringify(this.list[i]))
      data.status = 1
      this.$toast.loading({message: "加载中...", forbidClick: true});
      await this.api.EDIT_QUESTION(data);
      this.$toast.clear();
      this.$set(this.list[i], 'status', 1)
      this.$forceUpdate()
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
